<template>
   <div class="swiper-container" ref="floor1Swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in bannerList" :key='item.id'>
                <img :src="item.imgUrl">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
</div>
</template>

<script>
  // 引入 swiper 插件
  import Swiper from "swiper"
  export default {
    name:'Carousel',
    props:['bannerList'],
     watch:{
        floorInfo:{
            immediate:true,
            handler(){
                this.$nextTick(()=>{
                    new Swiper (this.$refs.floor1Swiper, {
                    loop: true, // 循环模式选项
                    
                    // 如果需要分页器
                    pagination: {
                    el: '.swiper-pagination',
                    // 小圆球点击可选中
                    clickable :true,
                    },
                    
                    // 如果需要前进后退按钮
                    navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                    },
                    
                    // 如果需要滚动条
                    scrollbar: {
                    el: '.swiper-scrollbar',
                    },

                    // 自动开启轮播
                    autoplay: {
                    delay: 2000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                    },
                    })
                })
            }
        }
    }
  }
</script>

<style scoped>
  
</style>